<template>
  <div class="details">
      <div class="bg" :style="{'background-image':'url('+musics[Ind].al.picUrl+')'}"></div>
              <div class="details-title">
          <div class="details-title-left">
              <text class="iconfont icon-zuojiantou" @click="toHome"></text>
          </div>
          <div class="details-title-left2">
               <text>{{musics[Ind].name}}</text>
               <text>{{musics[Ind].ar[0].name}}</text> 
          </div>
          <div class="details-title-right">
              <text class='iconfont icon-fenxiang'></text>
          </div>
      </div>
      <!-- 中心播放 -->
      <div class="details-pic">
       <img src="@/assets/cd.png">
       <img src="@/assets/needle-ab.png">
      </div>
        <!-- 中心播放图片 -->
        <div class="details-pic-center">
       <img :src="musics[Ind].al.picUrl">
         </div>
         <!-- icons图标 -->
         <div class="details-icons">
             <text class="iconfont icon-aixin"></text>
             <text class="iconfont icon-xiazai"></text>
             <text class="iconfont icon-zhibo"></text>
             <text class="iconfont icon-xiaoxi"></text>
             <text class="iconfont icon-liebiao-"></text>
         </div>
         <!-- slide滑块 -->
         <div class="details-slide">
            <van-slider v-model="value" button-size="18px" active-color="#87ceeb" class="sliders" />
         </div>
         <!-- 底部图标层 -->
         <div class="details-icons-bottom">
              <text class="iconfont icon-xunhuan"></text>
             <text class="iconfont icon-shangyishoushangyige" @click="lastMusic"></text>
             <text class="iconfont icon-bofang" @click="playAndPause" v-if="boState"></text>
             <text class="iconfont icon-zanting" @click="playAndPause" v-else></text>
             <text class="iconfont icon-xiayigexiayishou" @click="nextMusic"></text>
             <text class="iconfont icon-zu"></text>
             <!-- <van-dialog :show="show" title="标题" show-cancel-button></van-dialog> -->
         </div>
         <audio ref="aud" :src="`https://music.163.com/song/media/outer/url?id=${musics[Ind].id}.mp3`"></audio>
  </div>
</template> 

<script>
import {ref,computed,onUpdated,onMounted} from 'vue'
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
export default {
 setup(){
     const router = useRouter()
     const store = useStore()
     const endNum = false
     const aud = ref()
     const musics = computed(()=> store.state.musicURL)
     const boState = computed(()=> store.state.playOrPause)
     const lyricId = computed(()=> store.state.musicURL.id)
     const Ind = computed(()=>store.state.playIndex)
     const lycShows = computed(()=> store.state.lycShow)
     let arr = ""
    const value =ref(1)
    
   function lastMusic(){
    //    console.log(Ind.value)
       if(Ind.value!==0){
          store.commit('UPDATAINDEXS',Ind.value-1)
          aud.value.autoplay=true
          store.commit('UPDATASTATE',false)
       }
       else{
        confirm('当前为该歌单的第一首')
       }
    //   store.commit('UPDATAINDEXS',Ind.value-1)
    //   aud.value.autoplay=true
    //   store.commit('UPDATASTATE',false)
   }
   function nextMusic(){
       if(Ind.value+1 !== this.musics.length){
           store.commit('UPDATAINDEXS',Ind.value+1)
          aud.value.autoplay=true
          store.commit('UPDATASTATE',false)
       }
       else{
        confirm('当前为该歌单的最后一首')
       }
   }
    function playAndPause(){
    if(aud.value.paused){
        aud.value.play()
        store.commit('UPDATASTATE',false)
    }
    else{
        aud.value.pause()
        store.commit('UPDATASTATE',true)
    }
     }
     function toHome(){
      router.go(-1)
     }
     return {value,toHome,musics,aud,boState,playAndPause,lyricId,lycShows,Ind,lastMusic,nextMusic,endNum}
 }
}
</script>

<style lang="less" scoped>
.details{
    width:100%;
    // height:10vh;
    // background: fuchsia;
    .bg{
    position:relative;
    // width:
    height:100vh;
    // background: url('@/assets/demo.png');
    background-position: center;
    filter: blur(6px);
    opacity: .6;
}
.geci{
    position: absolute;
    top:0;
}
.details-title{
    position:absolute;
    top:0.2rem;
    width:100%;
    display:flex;
    justify-content: space-between;
    .details-title-left{
      width: 1rem;
      text{
          font-size: 0.5rem;
          font-weight: 600;
      }
    }
    .details-title-left2{
        margin-left:-3rem;
        // background: blue;
        width:2.6rem;
        text{
            // background: fuchsia;
            display:block;

        }
        text:nth-child(1){
            // background: fuchsia;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            color:rgb(182, 101, 101);
        }
        text:nth-child(2){
        margin-top:0.1rem;
        margin-left:0.2rem;
        color:rgb(87, 84, 84);
        }
    }
    .details-title-right{
        // width:2rem;
        margin-right:0.26rem;
        // background:pink;
         font-weight: 600;

        text{
            font-size:0.66rem;
        }
    }
}
.details-pic{

    img{
         position: absolute;
         top:3rem;
         left:1.3rem;
         width:4.9rem;
         height:4.9rem;
    }
    img:nth-child(2){
         position: absolute;
          top:1rem;
          left:2.9rem;
          width:2.9rem;
          height:2.9rem;
    }
}
.details-pic-center{

    img{
         position: absolute;
         top:3.9rem;
         left:2.19rem;
        width:3.2rem;
        height:3.2rem;
        border-radius: 100%;
    }
}
.details-icons{
  position: absolute;
  top:9.6rem;    
  display: flex;
  width:100%;
  justify-content: space-around;
    text{
        font-size:0.66rem;
        // color:rgb(253, 252, 252);
         background: linear-gradient(to right, rgb(71, 3, 71), rgb(102, 62, 3));
         background-clip: text;
         color: transparent
        
    }
}
.details-slide{
    .sliders{
        position:absolute;
        top:11.2rem;
    }
}
.details-icons-bottom{
    position: absolute;
    top:12rem;
    width:100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text{
        font-size:0.60rem;
        font-weight: 900;
         background: linear-gradient(to right, red, blue);
         background-clip: text;
         color: transparent
    }
    text:nth-child(3){
        font-size:0.76rem;
    }
}
}
</style>